<script setup>
// 消耗提示组件
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, ref } from "vue";
import request from "@/common/utils/request";
import { QrcodeOutlined, CloudSyncOutlined } from "@ant-design/icons-vue";

const props = defineProps({
  // 选择的视频数量
  checked_num: {
    type: Number,
    default: 0,
  },
  // 剩余剪辑次数
  splitNum: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["handleOk"]);
const dialog = ref(null);

const ee = ref({});
const ee_info = ref({});
const showModal = (e, info) => {
  ee.value = e;
  ee_info.value = info
  dialog.value.showModal();
};
const closeModal = () => {
  dialog.value.closeModal();
};
const clickFn = (type) => {
  dialog.value.closeModal();
  emit("handleOk", ee.value, type, ee_info.value );
};

defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <baseModel ref="dialog" :zIndex="1100"  :title="'请选择抖音发布方式'" >
      <template #content>
        <p>
           <span style="font-size:16px;font-weight: bold;">发布方式说明：目前抖音矩阵同时支持2种发布方式。</span> <br>
           <span><b>扫码发布：</b><br>需要对应账号配合的发布方式，从手机端打开抖音扫码完成发布。</span><br>
           <span><b>立即发布：</b><br>需要先下载客户端进行扫码授权登录，然后发布的时候选择在线账号再进行自动发布。</span>
        </p>
      </template>

      <template #footer>
        <a-button key="qr_code" @click="clickFn('qr_code')">
          <template #icon><QrcodeOutlined /></template>
          扫码发布</a-button
        >
        <a-button key="api" type="primary" @click="clickFn('api')">
          <template #icon><CloudSyncOutlined /></template>
          立即发布</a-button
        >
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
.title_box {
  .title {
    font-size: 18px;
    color: #1c1f23;
    font-weight: 600;
  }

  .tips_top {
    font-size: 13px;
    color: #42464e;
  }
}

.box {
  padding: 86px 20px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
}
</style>
